.LemonDivider {
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    background: var(--border);

    &--dashed {
        background: repeating-linear-gradient(
            to right,
            var(--border),
            var(--border) 4px,
            transparent 4px,
            transparent 8px
        );
    }

    &--thick {
        height: 3px;
    }

    &--vertical {
        align-self: stretch;
        width: 1px;
        height: auto;

        &.LemonDivider--thick {
            width: 3px;
        }

        &.LemonDivider--dashed {
            background: repeating-linear-gradient(
                to bottom,
                var(--border),
                var(--border) 4px,
                transparent 4px,
                transparent 8px
            );
        }
    }

    &--with-label {
        display: flex;
        height: unset;
        background: none;

        &::before,
        &::after {
            position: relative;
            top: 50%;
            display: block;
            width: 50%;
            content: '';
            border-top: 1px solid var(--border);
            transform: translateY(50%);
        }
    }
}
